<template>
  <div class="all">
    <header>
      <div class="div">
        <img src="../../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>项目价格明细</span>
      </div>
      <div class="div">
        <span class="solid" @click="LookHisList()">价格修改记录</span>
      </div>
    </header>
    <div class="titlte">
      <div class="label">
        <div class="tetx">项目类型</div>
        <div class="inputDiv">
          <input type="text" readonly v-model="item_name"  placeholder="请选择项目">
          <img src="../../../assets/更多灰@2x.png" v-show="id == undefined || id == ''" alt="">
        </div>
      </div>
    </div>
    <div class="titlte" @click="selectMingCheng()">
      <div class="label">
        <div class="tetx">项目名称</div>
        <div class="inputDiv">
          <input type="text"
                 :readonly="isEdit === 0"
                 v-model="item_idName"
                 placeholder="请输入项目名称"
                >
<!--      :readonly="item_type == 3 || item_type == 4 || item_type == 7 || isEdit === 0"
                 :placeholder="[item_type == 3 || item_type == 4 || item_type == 7 ? '请选择项目名称' : '请输入项目名称']"     -->
<!--          <img v-show="item_type == 3 || item_type == 4 || item_type == 7" src="../../../assets/更多灰@2x.png" alt="">-->
        </div>
      </div>
    </div>
    <div class="textarea">
      <p>
        <span>项目说明</span>
        <span style="color: #999">限100字以内</span>
      </p>
      <textarea name="" id="" :readonly=" isEdit === 0"
                v-model="desc" maxlength="100" cols="30" rows="10" placeholder="请输入项目说明"></textarea>
    </div>
    <div class="textarea" v-show="item_type == 3 || item_type == 4 || item_type == 7 || item_type == 8">
      <p>
        <span>操作流程</span>
        <span style="color: #999">限100字以内</span>
      </p>
      <textarea name=""
                :readonly="isEdit === 0"
                v-model="operator_flow" maxlength="100" cols="30" rows="10" placeholder="请输入操作流程"></textarea>
    </div>
    <div class="textarea" v-show="item_type == 3 || item_type == 4 || item_type == 7 || item_type == 8">
      <p>
        <span>注意事项</span>
        <span style="color: #999">限100字以内</span>
      </p>
      <textarea name=""
                :readonly="isEdit === 0"
                v-model="notes" maxlength="100" cols="30" rows="10" placeholder="请输入注意事项"></textarea>
    </div>
    <div class="textarea" v-show="item_type == 3 || item_type == 4 || item_type == 7 || item_type == 8">
      <p>
        <span>用物准备</span>
        <span style="color: #999">限100字以内</span>
      </p>
      <textarea name=""
                :readonly="isEdit === 0"
                v-model="goods_prepare" maxlength="100" cols="30" rows="10" placeholder="请输入用物准备"></textarea>
    </div>
    <div class="biaoqian" v-show="id !== '' && isEdit !== 0">
      <a class="hengGang"></a>
      修改前信息
    </div>
    <div class="titlte" v-show="id !== '' && isEdit !== 0">
      <div class="label">
        <div class="tetx">项目标准价格</div>
        <div class="inputDiv" >
          <input type="number" readonly v-model="old.old_amount" placeholder="项目标准价格">
          元
        </div>
      </div>
    </div>
    <div class="titlte" v-show="id !== '' && isEdit !== 0">
      <div class="label">
        <div class="tetx">项目价格折扣</div>
        <div class="inputDiv">
          <input type="number" readonly
                 v-model="old.old_rebate"  placeholder="项目价格折扣">
          折
        </div>
      </div>
    </div>
    <div class="titlte" v-show="id !== '' && isEdit !== 0">
      <div class="label">
        <div class="tetx">项目折扣后价格</div>
        <div class="inputDiv">
          <input type="number" style="width: 120px;" readonly v-model="old.old_rebate_amount"  placeholder="项目折扣后价格">
          元
        </div>
      </div>
    </div>
    <div class="titlte" v-show="Number(item_type) !== 1 && id !== '' && isEdit !== 0">
      <div class="label">
        <div class="tetx">项目时长</div>
        <div class="inputDiv">
          <input type="text"
                 readonly
                 v-model="old.old_duration"
          >
          分钟
        </div>
      </div>
    </div>
    <div class="biaoqian">
      <a class="hengGang"></a>
      修改后信息
    </div>
    <div class="titlte">
      <div class="label">
        <div class="tetx">项目标准价格</div>
        <div class="inputDiv" >
          <input type="number" @keyup="keyUpPrice()" :readonly="isEdit === 0"  v-model="amount" placeholder="项目标准价格">
          元
        </div>
      </div>
    </div>
    <div class="titlte">
      <div class="label">
        <div class="tetx">项目价格折扣</div>
        <div class="inputDiv">
          <input type="number" :readonly="isEdit === 0" @keyup="keyUpPrice()" @input="change(rebate)"
                 oninput="if(value>10)value=10" v-model="rebate"  placeholder="项目价格折扣">
          折
        </div>
      </div>
    </div>
    <div class="titlte">
      <div class="label">
        <div class="tetx">项目折扣后价格</div>
        <div class="inputDiv">
          <input type="number" style="width: 120px;" readonly v-model="rebate_amount"  placeholder="项目折扣后价格">
          元
        </div>
      </div>
    </div>
    <div class="titlte" v-show="Number(item_type) !== 1"
         @click="Number(item_type) !== 1 && isEdit !== 0 ? isDuration=true : isDuration = false">
      <div class="label">
        <div class="tetx">项目时长</div>
        <div class="inputDiv">
          <input type="text"
                 :readonly="item_type == 3 || item_type == 4 || isEdit === 0 || item_type == 5 || item_type == 2"
                 :placeholder="[item_type == 3 || item_type == 4 || item_type == 5 || item_type == 2 ? '请选择项目时长' : '请输入项目时长']"
                 v-model="duration"
          >
          分钟
        </div>
      </div>
    </div>

    <div style="height: 200px;"
         v-show="item_type !== 3 && item_type !== 4 && item_type !== 7 && item_type !== 8"
    ></div>

<!--    <div class="titlte" v-show="id === '' || isEdit === 0" @click="isEdit !== 0 ? isUseShow = true : isUseShow = false" >-->
<!--      <div class="label">-->
<!--        <div class="tetx">折扣作用于服务包</div>-->
<!--        <div class="inputDiv">-->
<!--          <input type="text" style="width: 150px;" readonly v-model="is_use_package_name"  placeholder="折扣是否作用于服务包">-->
<!--          <img v-show="isEdit !== 0" src="../../../assets/更多灰@2x.png" alt="">-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="bottom" v-show="isEdit !== 0">
      <button @click="keep()">保存</button>
    </div>
    <van-popup v-model="itemTypePicker" round position="bottom">
      <van-picker
        :default-index="defaultIndex"
        title="请选择项目"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="itemTypePicker = false"
      />
    </van-popup>
    <van-popup v-model="isUseShow" round position="bottom">
      <van-picker
        :default-index="isUseIndex"
        title="请选择是否作用于服务包"
        show-toolbar
        :columns="isUseColumns"
        @confirm="isUseOnConfirm"
        @cancel="isUseShow = false"
      />
    </van-popup>
    <van-popup v-model="isDuration" round position="bottom">
      <van-picker
        :default-index="isDurationIndex"
        title="请选择项目时长"
        show-toolbar
        :columns="(item_type == 2 ? shipinMinList : yuanchengMinList)"
        @confirm="isDurationOnConfirm"
        @cancel="isDuration = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'PriceDetails',
  data () {
    return {
      userid: this.$route.query.userid,
      itemTypePicker: false,
      columns: [
        {
          text: '图文咨询',
          type: 1
        },
        {
          text: '视频咨询',
          type: 2
        },
        {
          text: '居家康复',
          type: 3
        },
        {
          text: '居家护理',
          type: 4
        },
        {
          text: '远程会诊',
          type: 5
        },
        {
          text: '居家生活',
          type: 7
        },
        {
          text: '居家养老',
          type: 8
        }
      ],
      item_name: '',
      item_type: '',
      item_idName: '',
      item_id: '', // 项目id 图文视频为字符串 康复护理为项目id
      amount: '', // 价格
      duration: '', // 时长
      rebate: '10', // 折扣
      rebate_amount: '', // 折扣价
      desc: '', // 描述
      id: this.$route.query.id,
      defaultIndex: 0,
      isEdit: Number(this.$route.query.isEdit),
      isUseIndex: 0,
      is_use_package: '',
      is_use_package_name: '',
      isUseColumns: [
        {
          text: '否',
          id: 0
        },
        {
          text: '是',
          id: 1
        }
      ],
      isUseShow: false,
      shipinMinList: ['30', '60', '90', '120', '150', '180', '210', '240'],
      yuanchengMinList: ['30', '60', '90', '120', '150', '180', '210', '240'],
      // shipinMinList: ['15', '30', '45', '60', '75', '90', '105', '120'],
      // yuanchengMinList: ['30', '45', '60', '75', '90', '105', '120'],
      isDuration: false,
      isDurationIndex: 0,
      team_id: this.$route.query.team_id,
      old: {
        old_amount: '', // 价格
        old_duration: '', // 时长
        old_rebate: '10', // 折扣
        old_rebate_amount: '' // 折扣价
      },
      operator_flow: '', // 操作流程
      notes: '', // 注意事项
      goods_prepare: '' // 用物准备
    }
  },
  mounted () {
    if (this.id === undefined || this.id === null || this.id === '') {
      this.id = ''
    } else {
      if (this.team_id !== undefined && this.team_id !== null && this.team_id !== '') {
        this.getTeamHisData()
      } else {
        this.getHisData()
      }
    }
    if (sessionStorage.getItem('priceDetail') !== null) {
      var data = JSON.parse(sessionStorage.getItem('priceDetail'))
      this.item_name = data.item_name
      this.item_type = data.item_type
      this.item_idName = data.item_idName
      this.item_id = data.item_id // 项目id 图文视频为字符串 康复护理为项目id
      this.amount = data.amount // 价格
      this.duration = data.duration // 时长
      this.rebate = data.rebate // 折扣
      this.rebate_amount = data.rebate_amount // 折扣价
      this.desc = data.desc // 描述
    }

    // 取当前项目类型是 什么 图文 视频 康复 护理  远程
    if (sessionStorage.getItem('type') !== null) {
      this.item_type = sessionStorage.getItem('type')
      for (var i in this.columns) {
        if (this.item_type == this.columns[i].type) {
          this.defaultIndex = i
          this.item_name = this.columns[i].text
          break
        }
      }
    }
    this.keyUpPrice()
  },
  methods: {
    // 查看修改记录
    LookHisList () {
      this.$router.push({path: '/PriceUpdateHistory', query: {id: this.id, team_id: this.team_id}})
    },
    isDurationOnConfirm (value, index) {
      this.duration = value
      this.isDuration = false
    },
    isUseOnConfirm (value, index) {
      this.is_use_package_name = value.text
      this.is_use_package = value.id
      this.isUseShow = false
    },
    change (e) {
      if (Number(e) > 10) {
        this.rebate = 10
        return false
      }
      // 通过正则过滤小数点后一位
      this.rebate = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
    },
    // 修改 获取已有数据
    getHisData () {
      this.$http.findOneDocAmount({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.item_type = res.data.data.item_type
            if (this.item_type == 1 || this.item_type == 2) {
              if (res.data.data.item_id) {
                this.item_idName = res.data.data.item_id
              } else {
                this.item_idName = res.data.data.ITEM_ID
              }
              for (var i in this.columns) {
                if (Number(this.item_type) === Number(this.columns[i].type)) {
                  this.defaultIndex = i
                  this.item_name = this.columns[i].text
                  break
                }
              }
            } else if (this.item_type == 3 || this.item_type == 4 || this.item_type == 7 || this.item_type == 8) {
              this.item_idName = res.data.data.item_id
              // this.item_idName = res.data.data.ITEM_NAME
              if (this.item_type == 3) {
                this.item_name = '居家康复'
              } else if (this.item_type == 4) {
                this.item_name = '居家护理'
              }
              this.notes = res.data.data.notes
              this.operator_flow = res.data.data.operator_flow
              this.goods_prepare = res.data.data.goods_prepare
            } else if (this.item_type == 5) {
              this.item_idName = res.data.data.item_id
            }
            this.item_id = res.data.data.ITEM_ID // 项目id 图文视频为字符串 康复护理为项目id

            // this.is_use_package = res.data.data.is_use_package
            // for (var k in this.isUseColumns) {
            //   if (this.is_use_package == this.isUseColumns[k].id) {
            //     this.isUseIndex = k
            //     this.is_use_package_name = this.isUseColumns[k].text
            //   }
            // }

            this.amount = res.data.data.amount // 价格
            this.duration = res.data.data.duration // 时长
            this.rebate = res.data.data.rebate // 折扣
            if (this.rebate === null || this.rebate === '') {
              this.rebate = 10
            }
            this.rebate_amount = res.data.data.rebate_amount // 折扣价
            this.desc = res.data.data.desc // 描述

            // this.oldPrice = res.data.data.rebate_amount

            this.old.old_amount = res.data.data.amount // 价格
            this.old.old_duration = res.data.data.duration // 时长
            this.old.old_rebate = res.data.data.rebate // 折扣
            this.old.old_rebate_amount = res.data.data.rebate_amount // 折扣价
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getTeamHisData () {
      this.$http.findTeamAmountOne({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            let data = res.data.data
            this.item_type = data.item_type
            if (this.item_type == 1 || this.item_type == 2) {
              this.item_idName = data.item_id
              for (var i in this.columns) {
                if (Number(this.item_type) === Number(this.columns[i].type)) {
                  this.defaultIndex = i
                  this.item_name = this.columns[i].text
                  break
                }
              }
            } else if (this.item_type == 3 || this.item_type == 4 || this.item_type == 7 || this.item_type == 8) {
              this.item_idName = data.item_id
              // this.item_idName = data.ITEM_NAME
              if (this.item_type == 3) {
                this.item_name = '居家康复'
              } else if (this.item_type == 4) {
                this.item_name = '居家护理'
              }
              this.notes = res.data.data.notes
              this.operator_flow = res.data.data.operator_flow
              this.goods_prepare = res.data.data.goods_prepare
            } else if (this.item_type == 5) {
              this.item_idName = data.item_id
            }
            // this.item_id = data.ITEM_ID // 项目id 图文视频为字符串 康复护理为项目id
            this.item_id = data.item_id

            // this.is_use_package = data.is_use_package
            // for (var k in this.isUseColumns) {
            //   if (this.is_use_package == this.isUseColumns[k].id) {
            //     this.isUseIndex = k
            //     this.is_use_package_name = this.isUseColumns[k].text
            //   }
            // }

            this.amount = data.amount // 价格
            this.duration = data.duration // 时长
            this.rebate = data.rebate // 折扣
            if (this.rebate === null || this.rebate === '') {
              this.rebate = 10
            }
            this.rebate_amount = data.rebate_amount // 折扣价
            this.desc = data.desc // 描述

            // this.oldPrice = res.data.data.rebate_amount

            this.old.old_amount = res.data.data.amount // 价格
            this.old.old_duration = res.data.data.duration // 时长
            this.old.old_rebate = res.data.data.rebate // 折扣
            this.old.old_rebate_amount = res.data.data.rebate_amount // 折扣价
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 输入价格
    keyUpPrice () {
      if (Number(this.amount) > 0 && Number(this.rebate) > 0) {
        this.rebate_amount = (Number(this.amount) * (Number(this.rebate) / 10)).toFixed(2)
      } else {
        this.rebate_amount = ''
      }
    },
    // 保存按钮
    keep () {
      // 3 康复 4 护理
      // if (this.item_type == 3 || this.item_type == 4) {
      //
      // } else {
      //   this.item_id = this.item_idName
      // }
      this.item_id = this.item_idName

      if (this.item_type === undefined || this.item_type === null || this.item_type === '') {
        Toast('请选择项目类型')
        return false
      }
      if (this.item_type == 1 || this.item_type == 2) {
        this.item_id = this.item_idName
      }
      if (this.item_id === undefined || this.item_id === null || this.item_id === '') {
        Toast('请输入项目名称')
        return false
      }
      if ((this.duration === undefined || this.duration === null || this.duration === '') && (this.item_type == 2 || this.item_type == 5)) {
        Toast('请输入项目时长')
        return false
      }
      // if ((this.desc === undefined || this.desc === null || this.desc === '') && (this.item_type !== 3 && this.item_type !== 4)) {
      //   Toast('请输入项目说明')
      //   return false
      // }
      if (this.amount === undefined || this.amount === null || this.amount === '') {
        Toast('请输入标准价格')
        return false
      }
      if (this.rebate === undefined || this.rebate === null || this.rebate === '') {
        Toast('请输入价格折扣')
        return false
      }
      // if (this.is_use_package === undefined || this.is_use_package === null || this.is_use_package === '') {
      //   Toast('请选择是否作用于服务包')
      //   return false
      // }
      this.save()
    },
    // 保存操作
    save () {
      if (this.id === '' || this.id === undefined || this.id === null) {
        this.id = 0
      }

      var obj

      obj = {
        item_type: this.item_type,	// 项目类型 1:图文咨询;2:视频咨询;3:居家康复;4:居家护理',
        item_id: this.item_id, // 项目id 图文视频为字符串 康复护理为项目id
        amount: this.amount, // 价格
        rebate: this.rebate, // 折扣
        rebate_amount: this.rebate_amount, //	折后价格
        desc: this.desc, //	描述
        id: this.id // 修改传 新增传空或者为空字符串
      }
      if ((this.duration === undefined || this.duration === null || this.duration === '') && this.item_type == 1) {
      } else {
        obj.duration = this.duration
        obj.desc = this.desc //	描述
      }
      obj.operator_flow = this.operator_flow
      obj.notes = this.notes
      obj.goods_prepare = this.goods_prepare
      if (this.team_id !== undefined && this.team_id !== null && this.team_id !== '') {
        obj.team_id = this.team_id
      }
      obj = JSON.parse(JSON.stringify(obj))
      console.log(obj)
      if (this.team_id) {
        this.$http.createTeamPrice(obj)
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              Toast('操作成功')
              this.$router.history.go(-1)
            } else {
              Toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            Toast('您的网络有些拥挤，请稍后再试')
          })
      } else {
        this.$http.insertdocAmount(obj)
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              Toast('操作成功')
              this.$router.history.go(-1)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 康护到家 和 居家护理选择项目名称跳转
    selectMingCheng () {
      // if ((this.id !== null && this.id !== undefined && this.id !== '') || this.isEdit === 0) {
      //
      // } else {
      //   if (this.item_type == 3) {
      //     this.$router.push({path: 'recure', query: {type: 0, userid: this.userid, select: true}})
      //   } else if (this.item_type == 4) {
      //     this.$router.push({path: 'recure', query: {type: 1, userid: this.userid, select: true}})
      //   } else if (this.item_type == 7) {
      //     this.$router.push({path: 'recure', query: {type: 2, userid: this.userid, select: true}})
      //   }
      // }
    },
    // 项目类型确认按钮
    onConfirm (value, index) {
      this.item_name = value.text
      this.item_type = value.type
      this.itemTypePicker = false

      this.item_idName = ''
      this.item_id = ''
      this.duration = '' // 时长
      this.desc = '' // 描述
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  },
  destroyed () {
    var obj = {
      item_name: this.item_name,
      item_type: this.item_type,
      item_idName: this.item_idName,
      item_id: this.item_id, // 项目id 图文视频为字符串 康复护理为项目id
      amount: this.amount, // 价格
      duration: this.duration, // 时长
      rebate: this.rebate, // 折扣
      rebate_amount: this.rebate_amount, // 折扣价
      desc: this.desc // 描述
    }
    sessionStorage.setItem('priceDetail', JSON.stringify(obj))
    // sessionStorage.removeItem('teamPriceDetail')
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
  header{
     width: 100%;
     height: 44px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #E5E5E5;
     background: white;
     position: sticky;
     top: 0;
     z-index: 9;
   }
   .div{
     width: 33%;
     height: 100%;
     display: flex;
     align-items: center;
     font-family: "PingFang SC";
     font-size: 15px;
     font-weight: bold;
   }
   .div img{
     margin-right: 5px;
   }
   .div:nth-child(1) img{
     height: 13px;
     width: 7px;
     margin-left: 15px;
   }
   .div:nth-child(3) img{
     width: 13px;
     height: 13px;
     margin-right: 5px;
   }
   .div:nth-child(3) span{
     margin-right: 15px;
   }
   .div:nth-child(2){
     justify-content: center;
   }
   .div:nth-child(3){
     justify-content: flex-end;
   }
   .solid{
     color: #1DA4F2;
   }
  .titlte {
    width: 100%;
    height: 44px;
    display: flex;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-family: "PingFang SC";
    font-weight: 500;
  }
  .all .titlte:last-child{
    margin-bottom: 50px;
  }
  .label {
    width: 95%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;
  }
  .inputDiv {
  }
  .inputDiv input{
    text-align: right;
    margin-right: 5px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    border: none;
  }
  .inputDiv input::placeholder{
    color: #999999;
  }
  .inputDiv img{
    width: 7px;
    height: 13px;
  }
  .textarea{
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 15px;
    font-family: "PingFang SC";
    font-weight: 500;
  }
  .textarea p{
    width: 95%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .textarea textarea{
    width: 95%;
    height: 80px;
    background: #FAF9FE;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    /*margin: 0 2%;*/
    resize: none;
    border: none;
  }
  .bottom{
    width: 100%;
    position: sticky;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 10px 0;
    box-sizing: border-box;
  }
  .bottom button{
    width: 95%;
    height: 44px;
    border-radius: 20px;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    border: none;
    color: white;
  }
  .biaoqian{
    display: flex;
    align-items: center;
    height: 44px;
    background: #FFFFFF;
    font-weight: bold;
  }
  .hengGang
  {
    width: 2px;
    height: 15px;
    background: #1da4f2;
    margin: 0 5px 0 10px;
    display: block;
  }
</style>
